<template>
  <div class="area">
    <div class="content">
      <el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" label-width="90px" class="demo-ruleForm">
        <div style="margin:0 0 20px 0;">
          <span style="font-size:25px;font-weight:600;">
            找回密码
          </span>
        </div>
        <!-- <el-form-item label="会员名" prop="name">
          <el-input v-model="ruleForm.name" autocomplete="on"></el-input>
        </el-form-item> -->
        <el-form-item label="新密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model.number="ruleForm.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="usrCode">
          <el-input v-model="ruleForm.usrCode" autocomplete="off">
            <el-button :disabled="isDisabled" slot="append" style="background:#409EFF;color:white;" @click="sendCode">
              {{buttonName}}</el-button>
          </el-input>
        </el-form-item>
        <el-button class="loginbtn" type="primary" plain @click="submitForm('ruleForm')">修改</el-button>
        <div style="margin:15px 0 0 0;">
          <el-button type="text" @click="backlogin" style="font-size:16px;color:black;">返回登录</el-button>
          <!-- <el-button type="text" @click="newuser">免费注册</el-button> -->
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Forget',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      } else {
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    return {
      isDisabled: false,
      buttonName: '获取验证码',
      time: 60,
      ruleForm: {
        name: '',
        telephone: '',
        password: '',
        checkPass: '',
        usrCode: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入会员名', trigger: 'blur' },
          { min: 4, message: '长度在 4 位以上', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }
        ],
        usrCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    success (text) {
      this.$notify({
        title: '成功',
        message: text,
        type: 'success'
      })
    },
    failed (text) {
      this.$notify.error({
        title: '出错',
        message: text
      })
    },
    sendCode () {
      if (this.ruleForm.telephone) {
        let that = this
        var codeForm = new FormData()
        codeForm.append('name', that.ruleForm.telephone)
        this.$axios({
          url: '/api/v1/getpassotp',
          method: 'post',
          data: codeForm
        }).then((res) => {
          if (res.data.message === 'SUCCESS') {
            this.success('验证码发送成功！')
          } else {
            this.failed('验证码发送失败，稍后再试！')
          }
        })
        let interval = window.setInterval(function () {
          that.buttonName = '剩余' + that.time + '秒'
          --that.time
          that.isDisabled = true
          if (that.time < 0) {
            that.buttonName = '重新发送'
            that.time = 60
            that.isDisabled = false
            window.clearInterval(interval)
          }
        }, 1000)
      } else if (!this.ruleForm.telephone) {
        this.failed('手机号不能为空!')
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let that = this
          var UserForm = new FormData()
          UserForm.append('name', that.ruleForm.telephone)
          UserForm.append('otpCode', that.ruleForm.usrCode)
          UserForm.append('password', that.ruleForm.password)
          this.$axios({
            method: 'put',
            url: '/api/v1/fp',
            data: UserForm
          }).then((res) => {
            console.log(res)
            if (res.data.message === '用户不存在') {
              this.failed('该手机号未被注册！')
              // this.$router.push('/Login')
            } else if (res.data.message === '验证码错误') {
              this.failed('验证码错误')
            } else {
              this.success('注册成功！')
              this.$router.push('/Login')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    backlogin () {
      this.$router.push('/Login')
    }
  },
  mounted () {

  },
  computed: {

  }
}
</script>

<style scoped>
.area {
  height: 850px;
  width: 100%;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.content {
  position: relative;
  width: 600px;
  background: white;
  margin: 100px auto;
  padding: 30px 60px;
  border-radius: 10px;
}
.loginbtn {
  width: 350px;
  font-size: 20px;
  color: black;
}
</style>
